<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddDraggabled.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setZoom(14)
      let center = map.getCenter();

      let marker = new maptalks.Marker(
          center.add(-0.018, 0.007).toArray(),
          {
            "draggable": true,
            "symbol": {}
          }
      );

      let polyline = new maptalks.LineString([
        center.add(-0.018, 0.005).toArray(),
        center.add(0.006, 0.005).toArray()
      ], {
        "draggable": true,
        "symbol": {
          "lineColor": "#1bbc9b",
          "lineWidth": 5
        }
      });

      let polygon = new maptalks.Polygon([
        center.add(-0.018, 0.004).toArray(),
        center.add(0.006, 0.004).toArray(),
        center.add(0.006, -0.001).toArray(),
        center.add(-0.018, -0.001).toArray(),
        center.add(-0.018, 0.004).toArray()
      ], {
        "draggable": true,
        "symbol": {
          "lineColor": "#34495e",
          "lineWidth": 2,
          "polygonFill": "rgb(135,196,240)",
          "polygonOpacity": 0.6
        }
      });

      let geometries = [marker, polyline, polygon];

      let layer = new maptalks.VectorLayer("vector").addGeometry(geometries).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
